<template>
  <!-- 底部导航 -->
    <div class="nav-footer">
      <div class="nav-footer-item" @click='jumpTo("/")'><span class="iconfont icon-home"></span><span>首页</span></div>
      <div class="nav-footer-item"><span class="iconfont icon-weibiaoti2fuzhi12"></span><span>会员</span></div>
      <div class="nav-footer-item" @click='jumpTo("/cart")'><span class="iconfont icon-gouwuche"></span><span>购物车</span>
      <span class='badge'>12</span></div>
      <div class="nav-footer-item"><span class="iconfont icon-xiazai17"></span><span>搜索</span></div>
    </div>
</template>
<script>
export default {
  methods: {
    jumpTo (pathName) {
      this.$router.push({ name: pathName })
    }
  }
}
</script>
<style lang="scss">
    .vux-img {
      background-size: 100% 100% !important;
    }
</style>
<style lang="scss" scoped>
.nav-footer {
      font-size: 16px;
      display: flex;
      position: fixed;
      bottom: 0;
      height: 50px;
      width: 100%;
      border-top: 1px solid #e7e7e7;
      background-color: #fff;
      .nav-footer-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 25%;
        .badge {
          position: absolute;
          top: 3%;
          left: 50%;
          width: 14px;
          height: 14px;
          border-radius: 7px;
          background-color: #e4393c;
          text-align: center;
          line-height: 14px;
          color: white;
          font-size: 12px;
        }
        span:nth-child(2){
          color:#000;
        }
      }
    }
    .active {
      color: #26a2ff;
    }
</style>
